<template>
  <!-- 公用表格组件 适用简单表格类型
    参数均可改为配置

    待增加：分页复选框勾选
  -->
  <div class="table-public-box">
    <TableToolBtns
      v-if="toolData.length"
      :toolData="toolData"
      @onToolClick="onToolClick"
    />
    <!-- 表格 -->
    <el-table
      :ref="tableRef"
      v-loading="loading"
      class="w-table"
      :max-height="maxHeight"
      stripe
      :data="tableData"
      :row-key="rowKey"
      :border="border"
      :cell-style="cellStyle"
      :tree-props="treeProps"
      :header-cell-style="headerCellStyle"
      @selection-change="selectionOnChange"
      @row-dblclick="dblClick"
      :header-cell-class-name="headerCellClassName"
    >
      <!-- <template slot="empty">
        <div class="empty-box">
          <img src="@/assets/system_images/nodata.svg" alt="暂无数据" />
          <div style="margin-top: -40px">暂无数据</div>
        </div>
      </template> -->

      <!-- 枚举表头 -->
      <template>
        <!-- 复选框 -->
        <el-table-column
          v-if="isSelection"
          type="selection"
          width="55"
          fixed="left"
          :selectable="selectionFucn"
        />
        <!-- 索引 -->
        <el-table-column
          v-if="isIndex"
          type="index"
          label="序号"
          width="55"
          fixed="left"
        />
        <!-- 操作 -->
        <el-table-column
          v-if="handleItem != ''"
          :fixed="handleItem.fixed"
          :label="handleItem.label"
          :width="handleItem.width"
          :min-width="handleItem.minWidth || 55"
        >
          <template slot-scope="item">
            <!-- 操作列 现在只有按钮类型，可根据需求不断迭代组件 -->
            <div class="table-buttons">
              <span
                v-for="btn in handleItem.buttons"
                :key="btn.type"
                :style="{ color: btn.color ? btn.color : '#307eff' }"
                @click="
                  onBtnClick({
                    btn, // 按钮
                    item: item.row, // 行数据
                  })
                "
              >
                {{ btn.label }}
              </span>
            </div>
          </template>
        </el-table-column>
        <!-- 其他类型 -->
        <el-table-column
          v-for="(header, index) in columnsData"
          :key="index"
          :prop="header.prop"
          :label="header.label"
          :width="header.width"
          :min-width="header.minWidth"
          :fixed="header.fixed"
          :show-overflow-tooltip="showTooltip"
          :column-key="index.toString()"
          :render-header="renderHeader"
        >
          <template slot-scope="item">
            <!-- 表单列存在复杂结构类型，比如需要自定义input框、select选择器、嵌套表格等，
              在父组件使用具名插槽传入dom
             -->
            <template v-if="header.slot">
              <!-- name为插槽名 item为当前行数据，用于父组件dom处获取 -->
              <slot
                :name="header.slot"
                :item="item.row"
                :header="header"
              ></slot>
            </template>
            <!-- 其他普通数据类型 -->
            <div
              v-else
              :style="`color:${
                renderText({
                  item,
                  header,
                }).color || '#606266'
              };`"
              class="row-text-hide"
            >
              {{
                renderText({
                  item,
                  header,
                }).label || item.row[header.prop]
              }}
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>

    <!-- 分页组件 -->
    <Pagination
      v-if="isShowPagina"
      class="pagina-box"
      :page-sizes="PaginationArray"
      :total="apiData.total || 0"
      :page.sync="apiData.current"
      :limit.sync="apiData.size"
      @pagination="paginaOnChange"
    />
  </div>
</template>

<script src="./index.js"></script>
<style scoped lang="scss" src="./index.scss"></style>
